<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :isVxeColSeq="false"
      :isVxeToolbar="true"
      :isVxeCheckbox="false"
      :isVxeHandleS="false"
      @handleRemoveEmit="handleRemoveEmit"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @customSortMethodEmit="customSortMethodEmit"
    >


      <!-- <template v-slot:vxeToolsButtonsExtend>
        <el-button size="mini" icon="el-icon-s-data" @click="handleViewChart">生成曲线图</el-button>
      </template> -->


    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />





    <add-table-submit-form
      ref="addtablesubmitForm"
      :dialogFormVisible.sync="dialogFormVisibleAddTable"
      :dialogStatus="dialogStatusAddTable"
      :psTypeOptions="psTypeOptions"
      :tableTypeOptions="tableTypeOptions"
      :tableTypeOptionsfu="tableTypeOptions"
      :fieldNameOptions="fieldNameOptions"
      :pFieldNameOptions="pFieldNameOptions"
      :currentRow="currentRow"
      :checkBoxConfigs1="checkBoxConfigs1"
      @reloadfindList="findList"
      @formSearchDataTableNameChangeEmitEmit="formSearchDataTableNameChangeEmitEmit"
      @formSearchDataPTableNameChangeEmitEmit="formSearchDataPTableNameChangeEmitEmit"
      >
    </add-table-submit-form>
    

    <!-- 曲线图 -->
    <el-dialog
      :title="chartTitle"
      :visible.sync="DialogChartVisible"
      append-to-body
    >
      <ExManyLineChart
        :chart-data="lineChartData"
      />
    </el-dialog>

  </div>
</template>

<script>
import XEUtils from 'xe-utils'
// import * as _ from 'lodash'
// 基础折线图图表
import ExManyLineChart from '@/components/Echarts/LineChart/ExManyLineChart'

import {
  findtemplatecontent,  /* TODO: 暂时测试获取列表接口 */
  addtemplatecontent,
  findps_type,
  findtablename,
  findcolumn_name
  
} from './service/baseApi'
// 基础表格组件
import ExBaseTable from './components/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

import AddTableSubmitForm from './components/AddTableSubmitForm'

export default {
  name: 'vxe-basetable',
  mixins:[resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
    ExManyLineChart,
    AddTableSubmitForm
  },
  props: {
    /* 当前行数据 */
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {},
      // 检索条件-级联选择器数据
      // 级联选择器参数-start

      // 级联选择器参数-end

      // 排除条件
      sortField: '',
      sortFlag: '',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: '',
        table_name: '', 
        field_name: '', 
        field_meaning: '', 
        p_table_name: '',   
        p_field_name: '',   
        ps_type: '',   
      },
      initFormSubmitData: {
         id: '',
        table_name: '', 
        field_name: '', 
        field_meaning: '', 
        p_table_name: '',   
        p_field_name: '',   
        ps_type: '',    
       
      },
      // 表单下拉选项
      tableTypeOptions:[],
      psTypeOptions:[],
      fieldNameOptions:[],
      pFieldNameOptions:[],
      checkBoxConfigs1:{ },

      /* add-table表单相关 */
      dialogFormVisibleAddTable: false, // 修改删除弹出框
      dialogStatusAddTable: '',
      
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      /* 子表相关 */
      DialogSonTableVisible: false,

      /* 监听属性 watch API */
      // debouncedGetDeadlineSetList: _.debounce(this.getDeadlineSetList, 500),
      /* 是否是更新DOM初始化操作 */
      isUpdateDOMInit: false,

      /* 曲线图 */
      chartTitle: '',
      DialogChartVisible: false,
      lineChartData: {
        tooltipFormatter: '',
        legendData: [],
        xAxisData: [],
        seriesData: []
      },
      lineChartColors: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ],
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    // 计算属性作为中间 使用watch层监听对象某个属性
    // 生效时间
    formSubmitDataSdate() {
      return this.formSubmitData.s_date
    },
    // 期限方案id
    formSubmitDataTpId() {
      return this.formSubmitData.tp_id
    },
  },
  // 监控data中的数据变化
  watch: {
    currentRow() {
      this.findList()
    },
    // formSubmitDataSdate(newValue, oldValue) {
    //   this.debouncedGetDeadlineSetList()
    // },
    // formSubmitDataTpId(newValue, oldValue) {
    //   this.debouncedGetDeadlineSetList()
    // },

  },
  // 方法集合
  methods: {

    formSearchDataTableNameChangeEmitEmit(nVal,table_type){
      this.findcolumn_nameApi(nVal,table_type)
    },
    formSearchDataPTableNameChangeEmitEmit(nVal,table_type){
      this.findcolumn_nameApi(nVal,table_type)
    },

    /* API数据操作相关 */
    findcolumn_nameApi(table_name,table_type){
      findcolumn_name({
        table_name
      }).then(({data}) => {
        if (table_type === 'table_name') {
          // this.formSubmitData.field_name = ''
          // this.fieldNameOptions = data.rows  is_nullable  "NO"
          this.fieldNameOptions =   XEUtils.map(data.rows, item => {
            return {
              column_name:item.column_name,
              column_comment:item.column_comment,
              field_meaning:item.column_comment,
              is_nullable:item.is_nullable
            }
          })

          //  const fieldNameOptionsNO = XEUtils.filter(this.fieldNameOptions, item => item.is_nullable === 'NO')
          // this.checkBoxConfigs1 = { 
          //   labelField:'column_name', 
          //   checkRowKeys:fieldNameOptionsNO,
          //   visibleMethod: function ({ row }) {
          //     return row.is_nullable === 'YES'
          //   }
          // }
          // console.log('sdfdsfxxsdf',this.fieldNameOptions);
          const fieldNameOptionsNO = XEUtils.filter(this.fieldNameOptions, item => item.is_nullable === 'NO') // [{value: 22}]
          // console.log('sdfdsfsdf',fieldNameOptionsNO);
          this.$nextTick(() => {
            this.$refs.addtablesubmitForm.$refs.exEditTable.$refs.xGrid.setCheckboxRow(fieldNameOptionsNO, true)
          })

        }
        if (table_type === 'p_table_name') {
          // this.formSubmitData.p_field_name = ''
          // this.pFieldNameOptions = data.rows
          this.pFieldNameOptions =   XEUtils.map(data.rows, item => {
            return {
              column_name:item.column_name,
              column_comment:item.column_comment,
              field_meaning:item.column_comment,
              is_nullable:item.is_nullable
            }
          })

          const fieldNameOptionsNOfu = XEUtils.filter(this.pFieldNameOptions, item => item.is_nullable === 'NO') // [{value: 22}]
          // console.log('sdfdsfsdf',fieldNameOptionsNO);
          this.$nextTick(() => {
            this.$refs.addtablesubmitForm.$refs.exEditTableFu.$refs.xGrid.setCheckboxRow(fieldNameOptionsNOfu, true)
          })

        }
        // this.$nextTick(() => {

        //    this.$refs.addtablesubmitForm.$refs.exEditTable.$refs.xGrid.setCheckboxRow([tableData[2], tableData[3]], true)
        //   // this.$refs.submitForm.$refs['dataForm'].clearValidate()
        // })
      })
    },
    tableNameChangeEmit(cVal,table_type){
      this.findcolumn_nameApi(cVal,table_type)
    },
    // 获取期限设置数据
    // getDeadlineSetList() {

    //   if (this.isUpdateDOMInit === false) {
    //     // 初始化-曲线期限设置参数
    //     this.curveDeadlineSetList = []
    //     // 初始化-删除开头为"term_"的元素
    //     XEUtils.objectEach(this.formSubmitData, (item, key) => {
    //       if (key.startsWith("term_") && key !== 'term_rate') {
    //         // delete this.formSubmitData[`${key}`];
    //         this.$delete(this.formSubmitData,key)
    //       }
    //     })

    //     curveTermQueryTermPrice({
    //       m_id: this.formSubmitData.tp_id,
    //       // m_id: '8fa50871db694d688f0837c87ff879c1', /* TODO: 测试期限id */
    //       s_date: this.formSubmitData.s_date,
    //       // s_date: '2022-08-01', /* TODO: 测试生效日期 */
    //       // e_date: this.formSubmitData.e_date
    //     }).then(({data}) => {
    //       this.curveDeadlineSetList = data
    //       // 初始化-增加开头为"term_"的元素
    //       // formSubmitDataCom[`term_${item.term_code}`]
    //       XEUtils.objectEach(data, (item, key) => {
    //         this.$set(this.formSubmitData, `term_${item.term_code}`, 0)
    //         // 一下写法不是响应式！！！不要用
    //         // this.formSubmitData[`term_${item.term_code}`] = item.rate
    //       })

    //     }, error => {

    //     })
    //   }
    //   // 重置-是否是更新DOM初始化操作
    //   this.isUpdateDOMInit = false

    // },
    // 查询数据
    findList() {
      this.loading = true

      // 请求表格数据
      findtemplatecontent({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        m_id: this.currentRow.id,
        ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total || 0
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        // alert(error);
      })
    },

    pageFindList() {

      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        {field: 'table_comment', title: '表名', width: 300},
        {field: 'field_comment', title: '字段名', width: 200},
        {field: 'ps_typename', title: '主子类型', width: 200},
        {field: 'field_meaning', title: '映射后字段含义', width: 200},
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {

      
      this.dialogFormVisibleAddTable = true


      // 重置表单内容
      // this.resetFormSubmitData({
      //   replaceObj: {
          
      //   },
      //   exclude: [
      //     // 'curr_code'
      //   ]
      // })
      // this.dialogStatus = type
      // this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs.submitForm.$refs['dataForm'].clearValidate()
      // })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.isUpdateDOMInit = true
      this.dialogStatus = type
      this.dialogFormVisible = true
      // 重置表单内容
      this.resetFormSubmitData({
        resetObj: Object.assign({}, row),
        // 重置数据值
        replaceObj: {
          cv_type: this.currentRow.cv_typename,
        },
        // 排除不重置元素
        exclude: []
      })

      // // 初试化-增加开头为"term_"的元素 formSubmitDataCom[`term_${item.term_code}`]
      // XEUtils.objectEach(row.term_rate, (item, key) => {
      //   this.$set(this.formSubmitData, `term_${item.term_code}`, item.rate)
      //   // 一下写法不是响应式！！！不要用
      //   // this.formSubmitData[`term_${item.term_code}`] = item.rate
      // })
      // this.curveDeadlineSetList = row.term_rate
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      // this.$refs.exBaseTable.$refs.xTable.remove(row)
      deleteInputParams({
        id: row.id,
        m_id: this.currentRow.id,
      }).then(({data}) => {

        this.findList()
        // 关闭加载特效

      }, error => {
        // alert(error);
      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      updateInputParams({
        m_id: this.currentRow.id,
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {

        this.findList()
        // 关闭加载特效

      }, error => {
        // alert(error);
      })
    },

    // 增加
    handleFromCreateDataEmit() {
      addtemplatecontent({
        m_id: this.currentRow.id,
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {

        this.findList()
        // 关闭加载特效

      }, error => {
        // alert(error);
      })
    },
    fetchListprmType() {
      findps_type({
        // ...this.formSearchData,  //检索条件
      }).then(({data}) => {

        // this.psTypeOptions = data.rows
        this.psTypeOptions = XEUtils.map(data.rows, item => {
          return {
            label:item.name,
            value:item.code
          }
        })
        
      })
    },
    fetchtablename() {
      findtablename({
        // ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // this.tableTypeOptions = data.rows
        this.tableTypeOptions = XEUtils.map(data.rows, item => {
          return {
            label:item.table_comment,
            value:item.table_name
          }
        }) 

      })
    },
    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      this.findList()

    },
    handleRemoveEmit() {
    },

    /* 子表格弹出 */
    viewSonTable(row) {
      this.DialogSonTableVisible = true
    },

    // 获取曲线期限列表
    // getCurveDeadlineList() {
    //   curveTermQueryTermScheme().then(({data}) => {
    //     this.curveDeadlineList = data
    //   }, error => {
    //     // alert(error);
    //   })
    // },
    /* 生成图表 */
    handleViewChart() {


      let tooltipFormatter = `{b}<br />`
      let legendData = []
      let xAxisData = []
      let seriesData = []

      let xAxisArrAll = []
      // 获取选中数据
      let selectRecords = this.$refs.exBaseTable.$refs.xTable.getCheckboxRecords()
      console.log(selectRecords);
      if (selectRecords.length) {

        XEUtils.objectEach(selectRecords, (item, key) => {
          // 获取所有系列legendData
          legendData.push(`${item.tp_name}-${item.s_date}`)
          tooltipFormatter += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${this.lineChartColors[`${key}`]}"></span>\
                	{a${key}}：{c${key}}%<br />`

          XEUtils.objectEach(item.term_rate, (val, key) => {
            // 累计所有X轴元素
            xAxisArrAll.push(val.term)
          })
        })

        // 去重获取X轴元素，获取显示X轴元素
        xAxisData = XEUtils.uniq(xAxisArrAll)
        // 重组所有选中数据
        XEUtils.objectEach(selectRecords, (item, key) => {
          let seriesDataData = []
          let termRateArr = {}

          XEUtils.objectEach(item.term_rate, (val, key) => {
            // 累计已知X轴元素数据
            termRateArr[`${val.term}`] = val.rate
          })
          console.log('termRateArr', termRateArr);
          // 按照完整的x轴元素 重组完整X轴元素数据
          XEUtils.objectEach(xAxisData, (val, i) => {
            let xVal = termRateArr[`${val}`] || 0
            seriesDataData.push(xVal)
          })
          console.log('seriesDataData', seriesDataData);

          seriesData.push({
            name: `${item.tp_name}-${item.s_date}`,
            type: 'line',
            smooth: true,
            data: seriesDataData
          })

        })


        console.log('seriesData', seriesData);
        console.log('tooltipFormatter', tooltipFormatter);

        this.lineChartData = {
          tooltipFormatter,
          legendData,
          xAxisData,
          seriesData
        }

        console.log('this.lineChartData', this.lineChartData);

        this.chartTitle = '曲线图'
        this.DialogChartVisible = true

      } else {
        this.$alert(this.$t('message.msg1'))
        return false;
      }

    },


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 测试功能-下拉分页表格
    // this.keyupEvent4()
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
    this.fetchListprmType()
    this.fetchtablename()
    // 初始化表格期限列表数据
    // this.getCurveDeadlineList()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>